import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import 'package:study_online/global/colors.dart';
import 'package:study_online/pages/loginRegisterPage/LoginRegisterViewModel.dart';

class RegisterPage extends StatefulWidget {
  RegisterPage({Key key}) : super(key: key);

  @override
  _RegisterPageState createState() {
    return _RegisterPageState();
  }
}

class _RegisterPageState extends State<RegisterPage> {
  TextEditingController _tel, _verify, _studentNumber, _passWord;
  int seconds = 20;
  String code;
  Timer t;
  bool sendCodeBtn = false;

  @override
  void initState() {
    super.initState();
    _tel = new TextEditingController();
    _verify = new TextEditingController();
    _studentNumber = new TextEditingController();
    _passWord = new TextEditingController();
  }

  @override
  void dispose() {
    super.dispose();
    _tel.dispose();
    _verify.dispose();
    _studentNumber.dispose();
    _passWord.dispose();
    if(t!=null)
      t.cancel();
  }

  _showTimer() {
    this.sendCodeBtn = true;
    seconds = 20;
    t = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        this.seconds--;
      });
      if (this.seconds == 0) {
        t.cancel(); //清除定时器
        setState(() {
          this.sendCodeBtn = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        designSize: Size(361, 625),
        );
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios_rounded,
            color: AppColors.primary,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(top: ScreenUtil().setHeight(10)),
              alignment: Alignment.center,
              child: Text(
                '手机号注册',
                style: TextStyle(
                    fontSize: ScreenUtil().setSp(22),
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontFamily: '方正御墨行书'),
              ),
            ),
            //手机号
            Container(
              //color: Colors.amber,
              width: double.infinity,
              height: ScreenUtil().setHeight(40),
              margin: EdgeInsets.only(
                  left: ScreenUtil().setWidth(20),
                  right: ScreenUtil().setWidth(20)),
              child: TextField(
                controller: _tel,
                cursorColor: Color(0xff2DCA97),
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: Icon(
                      Icons.close,
                      color: Color(0xffBEBEBE),
                    ),
                    onPressed: () {
                      _tel.clear();
                    },
                  ),
                  hintText: '请输入手机号',
                  // labelText: '学号',
                  labelStyle: TextStyle(
                      color: Color(0xffBEBEBE),
                      fontSize: ScreenUtil().setSp(10)),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: (BorderSide(
                      color: Color(0xff2DCA97),
                    )),
                  ),
                ),
              ),
            ),
            //验证码
            Container(
              //color: Colors.amber,
              width: double.infinity,
              height: ScreenUtil().setHeight(40),
              margin: EdgeInsets.only(
                  left: ScreenUtil().setWidth(20),
                  right: ScreenUtil().setWidth(20)),
              child: Stack(
                children: [
                  TextField(
                    controller: _verify,
                    obscureText: true,
                    decoration: InputDecoration(
                      hintText: '请输入验证码',
                      labelStyle: TextStyle(
                          color: Color(0xffBEBEBE),
                          fontSize: ScreenUtil().setSp(10)),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: (BorderSide(
                          color: Color(0xff2DCA97),
                        )),
                      ),
                    ),
                  ),
                  Positioned(
                    top: ScreenUtil().setHeight(2),
                    right: ScreenUtil().setWidth(10),
                    child: this.sendCodeBtn == false
                        ? RaisedButton(
                            onPressed: () {
                              _showTimer();
                            },
                            child: Text('发送验证码'),
                            color: Colors.white,
                            elevation: 0,
                          )
                        : RaisedButton(
                            onPressed: () {
                              //_showTimer();
                            },
                            child: Text('${this.seconds}秒后重发'),
                            color: Colors.white,
                            elevation: 0,
                          ),
                  ),
                ],
              ),
            ),
            //学号
            Container(
              //color: Colors.amber,
              width: double.infinity,
              height: ScreenUtil().setHeight(40),
              margin: EdgeInsets.only(
                  left: ScreenUtil().setWidth(20),
                  right: ScreenUtil().setWidth(20)),
              child: TextField(
                controller: _tel,
                cursorColor: Color(0xff2DCA97),
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                decoration: InputDecoration(
                  hintText: '请输入学号',
                  // labelText: '学号',
                  labelStyle: TextStyle(
                      color: Color(0xffBEBEBE),
                      fontSize: ScreenUtil().setSp(10)),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: (BorderSide(
                      color: Color(0xff2DCA97),
                    )),
                  ),
                ),
              ),
            ),
            //密码
            Container(
              //color: Colors.amber,
              width: double.infinity,
              height: ScreenUtil().setHeight(40),
              margin: EdgeInsets.only(
                  left: ScreenUtil().setWidth(20),
                  right: ScreenUtil().setWidth(20)),
              child: TextField(
                controller: _passWord,
                cursorColor: Color(0xff2DCA97),
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                decoration: InputDecoration(
                  hintText: '请输入密码',
                  // labelText: '学号',
                  labelStyle: TextStyle(
                      color: Color(0xffBEBEBE),
                      fontSize: ScreenUtil().setSp(10)),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: (BorderSide(
                      color: Color(0xff2DCA97),
                    )),
                  ),
                ),
              ),
            ),
            //注册按钮
            Container(
              height: ScreenUtil().setHeight(46),
              width: double.infinity,
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(70),
                left: ScreenUtil().setWidth(20),
                right: ScreenUtil().setWidth(20),
              ),
              child: Container(
                margin: EdgeInsets.only(
                  left: ScreenUtil().setWidth(30),
                  right: ScreenUtil().setWidth(30),
                ),
                child: RaisedButton(
                  child: Text(
                    '注册并登录',
                    style: TextStyle(fontSize: ScreenUtil().setSp(20)),
                  ),
                  textColor: Colors.white,
                  color: Color(0xff2DCA97),
                  shape: StadiumBorder(),
                  onPressed: () {
                    Provider.of<RegisterViewModel>(context,listen: false).register(_tel.text, _studentNumber.text, _passWord.text);
                    //Navigator.pushNamed(context,"/app");
                  },
                ),
              ),
            ),
            SizedBox(
              height: ScreenUtil().setHeight(163.5),
            ),
            Container(
              alignment: Alignment.bottomCenter,
              child: Image.asset('assets/img/login_bg.png',
                  width: double.infinity, fit: BoxFit.fitWidth),
            ),
          ],
        ),
      ),
    );
  }
}
